<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '智能缴费提醒',
    onReachBottomDistance: 100,
  },
}
</route>

<template>
  <view class="page-container">
    <wd-sticky :offset-top="-45">
      <view class="nav-bar border-b">
        <view class="flex items-center justify-between px-3 h-10">
          <view class="flex items-center">
            <wd-icon name="arrow-left" size="22px" @click="goBack"></wd-icon>
            <span class="ml-3 text-base font-medium">智能缴费提醒</span>
          </view>
          <span class="text-#4477ee text-sm">筛选</span>
        </view>
        <wd-notice-bar
          text="以下建议提醒方案由 AI
            按照用户缴费习惯、是否存在积极因素等方面智能分析生成。您可点击查看详情了解更多信息！"
          prefix="warn-bold"
        />
        <!-- <view class="flex flex-row gap-2 bg-gray-50 px-3 py-2 text-sm text-gray-600">
          <wd-icon name="warn-bold" size="22px" color="#FF9800"></wd-icon>
          <view class="">
            以下建议提醒方案由 AI
            按照用户缴费习惯、是否存在积极因素等方面智能分析生成。您可点击查看详情了解更多信息！
          </view>
        </view> -->
        <view>
          <wd-tabs v-model="tab" @click="handleTab">
            <wd-tab :title="`待提醒`"></wd-tab>
            <wd-tab :title="`已提醒`"></wd-tab>
            <wd-tab :title="`暂不提醒`"></wd-tab>
          </wd-tabs>
        </view>
        <!-- <view class="flex px-3 bg-white border-b">
          <view
            class="py-3 px-3"
            :class="tabActive == 1 ? 'tab-active' : 'text-gray-600'"
            @click="handleTab(1)"
          >
            待提醒
          </view>
          <view
            class="py-3 px-3"
            :class="tabActive == 2 ? 'tab-active' : 'text-gray-600'"
            @click="handleTab(2)"
          >
            已提醒
          </view>
          <view
            class="py-3 px-3"
            :class="tabActive == 3 ? 'tab-active' : 'text-gray-600'"
            @click="handleTab(3)"
          >
            暂不提醒
          </view>
        </view> -->
      </view>
    </wd-sticky>
    <view class="content">
      <view v-if="loading" class="center m-5">
        <wd-loading />
      </view>
      <view v-else>
        <view class="py-3 mx-3 space-y-3" v-if="recommendList.length">
          <view
            class="bg-white rounded-lg p-3 shadow-sm relative"
            v-for="item in recommendList"
            :key="item.id"
          >
            <image
              v-if="item.deal == 1"
              class="absolute right-2 top-10 h-16 w-16"
              src="/static/pay_feed.png"
            />
            <view class="flex justify-between items-start text-sm">
              <view>
                <view class="flex">
                  <text class="text-[#6e6e6e] w-20 shrink-0">房间编号：</text>
                  <text>{{ item.roomName }}</text>
                </view>
                <view class="mt-1 flex">
                  <text class="text-[#6e6e6e] w-20 shrink-0">业主姓名：</text>
                  <view>
                    {{ item.customerName }}
                  </view>
                </view>
                <view class="mt-1 flex">
                  <text class="text-[#6e6e6e] w-20 shrink-0">欠费类型：</text>
                  <text>{{ item.arrearsFeeTypeName }}</text>
                </view>
              </view>
              <view class="text-right">
                <view class="text-base font-medium">
                  合计:
                  <wd-text :text="item.fee" mode="price" type="primary" prefix="￥" />
                  元
                </view>
                <wd-tag type="warning" v-if="item.deal != 1" mark>
                  本年已催 {{ item.noticeCount }} 次
                </wd-tag>
              </view>
            </view>

            <view class="mt-1 text-sm">
              <view class="flex">
                <text class="text-[#6e6e6e] w-20 shrink-0">费用期间：</text>
                <text>{{ item.startTime }}至{{ item.endTime }}</text>
              </view>
              <view class="mt-1 flex">
                <text class="text-[#6e6e6e] w-20 shrink-0">费用类型：</text>
                <text>{{ item.feeTypeName }}</text>
              </view>
            </view>

            <view class="mt-3 flex flex-wrap gap-2">
              <template v-for="(it, idx) in item.tags" :key="it">
                <wd-tag :type="colorTags[idx % 5]" plain custom-class="tag">
                  {{ it }}
                </wd-tag>
              </template>
              <!-- <wd-tag type="primary" plain>聊天预约今日缴费</wd-tag>
              <wd-tag type="warning" plain>空置房减免 2 个月</wd-tag>
              <wd-tag type="success" plain>业委会成员</wd-tag>
              <wd-tag plain>缴费积极客户</wd-tag>
              <wd-tag type="primary" plain>本年度累计提供2次工单服务</wd-tag>
              <wd-tag type="danger" plain>业主满意度评分高</wd-tag>
              <wd-tag type="warning" plain>3月1日帮业主处理纠纷</wd-tag>
              <wd-tag type="success" plain>较支持物业工作</wd-tag> -->
            </view>

            <view class="mt-3 text-align-right" style="text-align: right">
              <wd-button
                size="small"
                :round="true"
                v-if="item.status == 1"
                plain
                style="margin-right: 8px"
                @click="handleIgnore(item.id)"
              >
                忽略
              </wd-button>
              <wd-button
                size="small"
                :round="true"
                v-if="item.status == 1"
                @click="goPage('/pages/fees/recomdetail?id=' + item.id)"
              >
                发送提醒
              </wd-button>
              <wd-button size="small" :round="true" plain v-if="item.status == 2">
                查看详情
              </wd-button>
            </view>
          </view>

          <wd-loadmore :state="state" @reload="loadmore" />
        </view>
        <wd-status-tip v-else image="content" tip="暂无内容" />
      </view>
    </view>

    <view class="fixed bottom-0 left-0 w-full bg-white py-3" v-if="tab == 0">
      <button
        class="bg-#4477ee text-white w-[80%] m-auto rounded-b font-medium"
        @click="handleShareAppMessage()"
      >
        批量提醒
      </button>
    </view>
    <wd-toast />

    <!-- <view class="fixed bottom-[80px] w-full flex justify-center gap-2 text-sm">
      <button class="px-3 py-2 text-gray-600">Previous</button>
      <button class="px-3 py-2 text-gray-600">1</button>
      <button class="px-3 py-2 bg-#4477ee text-white rounded">2</button>
      <button class="px-3 py-2 text-gray-600">3</button>
      <button class="px-3 py-2 text-gray-600">Next</button>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
//
import * as ww from '@wecom/jssdk'
import { IFees, getFeesList } from './api'
import type { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'
import type { TagType } from 'wot-design-uni/components/wd-tag/types'
import { useToast } from 'wot-design-uni'
import { registerWeChat } from '@/utils/wecom'
const toast = useToast()
registerWeChat()

const tab = ref(0)
// const tabActive = ref(1)
const recommendList = ref([])
const loading = ref(true)
const state = ref<LoadMoreState>('loading')
const colorTags = ['primary', 'success', 'warning', 'danger', 'primary'] as TagType[]
const pageNo = ref(1)
const recommendListRes = ref([])

handleTab({ index: 0 })
async function handleTab({ index }) {
  loading.value = true
  pageNo.value = 1
  await loadmore(index)
  loading.value = false
}

async function loadmore(idx: number): Promise<void> {
  getFeesList({ status: tab.value + 1, pageSize: 10, pageNum: pageNo.value })
    .then((res: IResData<IFees[]>) => {
      console.log(res)
      let list = (res && res.rows) || []
      if (list.length < 10) {
        state.value = 'finished'
      } else {
        state.value = 'loading'
        pageNo.value++
      }
      list = list.map((item) => {
        return {
          ...item,
          tags: [
            ...item.chat.split(' '),
            ...item.communicationSituation.split(' '),
            ...item.otherAnalysis.split(' '),
            ...item.paymentHabits.split(' '),
            ...item.portrait.split(' '),
            ...item.positiveFactors.split(' '),
            // ...item.negativeFactors.split(' '),
          ],
        }
      })
      if (pageNo.value === 1) {
        recommendList.value = list
      } else {
        recommendList.value = [...recommendList.value, ...list]
      }
    })
    .catch((error) => {
      state.value = 'error'
      toast.error(error.message)
    })
}

onPullDownRefresh(async () => {
  await handleTab({ index: tab.value })
  uni.stopPullDownRefresh()
})
onReachBottom(() => {
  if (state.value !== 'finished') {
    loadmore(tab.value)
  }
})
function goPage(url: string) {
  uni.navigateTo({
    url,
  })
}
function handleIgnore(id) {
  toast.loading('加载中...')
  setTimeout(() => {
    recommendList.value = recommendList.value.filter((item) => item.id !== id)
    toast.success('忽略成功')
  }, 1000)
}
function handleBatchRemind() {
  if (recommendList.value.length === 0) {
    toast.warning('暂无要提醒的记录')
    return
  }
  toast.loading('加载中...')
  setTimeout(() => {
    recommendList.value = []
    toast.success('批量提醒成功')
  }, 1000)
}
const handleShareAppMessage = () => {
  // 企微
  ww.shareAppMessage({
    title: '小鑫管家拍拍您，有个账单请查收',
    desc: '请您抽30秒时间点击账单，便捷缴费，小鑫感谢您的配合，动力满满。',
    link: 'https://wxaurl.cn/BLIYoUKz7Kj',
    imgUrl: 'https://res.mail.qq.com/node/ww/wwmng/style/images/index_share_logo$13c64306.png',
  })
}
function goBack() {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<style lang="scss" scoped>
//
.page-container {
  // height: 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
  background-color: #f5f7fa;
}
.nav-bar {
  width: 100vw;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.content {
  padding-bottom: 20rpx;
}
.tab-active {
  color: #4b77e7;
  border-bottom: 2px solid #4b77e7;
}
:deep(.tag) {
  padding: 8rpx 16rpx;
  font-size: 0.75rem;
  line-height: 1.25rem;
  border-radius: 8rpx;
}
</style>
